<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!-- 引入echarts-->
  <script src="echarts.min.js"></script>
</head>
<body>
<!--为ECharts准备好一个具备大小(宽高)的DOM-->
<div id="main" style="width:900px;height:600px;"></div>
<script>
  //基于准备好的DOM，初始化echarts实例
  var myChart=echarts.init(document.getElementById('main'));
  //指定图表的配置项和数据
  var option={
    //标题
    title:{
      text:'ECharts 入门示例'
    },
    //工具箱
    toolbox:{
      show:true,
      feature:{
        dataView:{
          show:true
        },
        restore:{
          show:true
        },
        saveAsImage:{
          show:true
        },
        dataZoom:{
          show:true
        },
        magicType:{
          type:['line','bar']
        }
      }
    },
    //图例
    legend:{
      data:['销量']
    },
    //x轴
    xAxis:{
      data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis:{},
    //数据
    series:[{
      name:'销量',
      type:'bar',
      data:[5,20,36,10,10,20]
    },{
      name:'产量',
      type:'line',
      data:[7,30,50,11,40,80]
    }]
  };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
</script>
</body>
</html>